<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识产权交易管理</title>
    <!-- 引入Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <h1>知识产权交易管理</h1>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">编号</th>
            <th scope="col">所有者</th>
            <th scope="col">用户名</th>
            <th scope="col">交易时间</th>
            <th scope="col">交易价格</th>
            <th scope="col">专利名称</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="transactionTableBody">
        <!-- 在这里动态生成交易记录 -->
        </tbody>
    </table>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTransactionModal">添加交易记录</button>
</div>

<!-- 添加交易记录的模态框 -->
<div class="modal fade" id="addTransactionModal" tabindex="-1" aria-labelledby="addTransactionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addTransactionModalLabel" style="float: right;">添加交易记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 在这里添加表单元素以收集用户输入的交易信息 -->
                <form id="PatentTransaction">
                    <div class="mb-3">
                        <label for="userName" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="userName" required>
                    </div>
                    <div class="mb-3">
                        <label for="owner" class="form-label">专利持有者</label>
                        <input type="text" class="form-control" id="owner" required>
                    </div>
                    <div class="mb-3">
                        <label for="PatentName" class="form-label">专利名</label>
                        <input type="text" class="form-control" id="PatentName" required>
                    </div>
                    <div class="mb-3">
                        <label for="transactionPrice" class="form-label">交易价</label>
                        <input type="number" step="0.01" class="form-control" id="TransactionPrice" required>
                    </div>
                    <div class="mb-3">
                        <label for="TransactionTime" class="form-label">交易时间</label>
                        <input type="date" class="form-control" id="TransactionTime" required>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveTransactionButton" onclick="addPatentTransaction()">保存</button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    /**
     * 从服务器获取专利信息并显示在表格中
     */
    // 获取专利信息并显示在表格中
    function fetchPatentTransaction() {
        $.ajax({
            url: '/api/transactions',
            type: 'GET',
            success: function(data) {
                let tableBody = $('#transactionTableBody');
                tableBody.empty();
                data.forEach(function(PatentTransaction) {
                    let row = `<tr>
                                    <td>${PatentTransaction.transactionId}</td>
                                    <td>${PatentTransaction.owner}</td>
                                    <td>${PatentTransaction.userName}</td>
                                    <td>${PatentTransaction.transactionTime}</td>
                                    <td>${PatentTransaction.transactionPrice.toFixed(2)}</td>
                                    <td>${PatentTransaction.patentName}</td>
                                    <td>
                                        <button class="btn btn-sm btn-warning" onclick="editPatentTransaction(${PatentTransaction.transactionId})">编辑</button>
                                        <button class="btn btn-sm btn-danger" onclick="deletePatentTransaction(${PatentTransaction.transactionId})">删除</button>
                                    </td>
                                </tr>`;
                    tableBody.append(row);
                });
            }
        });
    }

    /**
     * 添加新专利
     */
    // 添加专利
    function addPatentTransaction() {
        let userName = $('#userName').val();
        let owner = $('#owner').val();
        let patentName = $('#patentName').val();
        let transactionTime = $('#transactionTime').val();
        let transactionPrice = parseFloat($('#transactionPrice').val());
        $.ajax({
            url: '/api/transactions',
            type: 'POST',
            data: JSON.stringify({
                userName: userName,owner: owner,transactionTime: transactionTime,transactionPrice: transactionPrice,
                patentName: patentName

            }),
            contentType: 'application/json',
            success: function() {
                $('#addTransactionModal').modal('hide');
                fetchPatentTransaction();
            }
        });
    }


    // 编辑专利（此处仅提供示例，实际应实现完整的编辑功能）
    function editpatenttransaction(patenttransactionID) {
        alert('编辑专利功能尚未实现');
    }

    /**
     * 删除指定专利
     * @param {number} patentID - 专利编号
     */
    // 删除专利
    function deletePatentTransactionById(transactionId) {
        $.ajax({
            url: '/api/transactions/' + transactionId,
            type: 'DELETE',
            success: function() {
                fetchPatentTransaction();
            }
        });
    }

    // 页面加载时初始化专利信息列表
    // 初始化页面时获取专利信息并显示在表格中
    $(document).ready(function() {
        fetchPatentTransaction();
    });
</script>
</body>
</html>
